<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref,onMounted } from 'vue';
import {searchSuggest} from '../api/api'
import { cityPinia } from '../stores/home'
import { storeToRefs } from 'pinia'
const router = useRouter();
const cityStore = cityPinia()
const {cityId} = storeToRefs(cityStore)
const value = ref('');
const showHistory = ref(true)

const onSearch = (val:string) => {
    console.log(val);
}
const onCancel = () => {
    showHistory.value = true
    console.log(showHistory.value);
};
const onUpdate = (val:string) =>{
    getSearchSuggest(val,cityId.value)
}
const searchSuggestRes = ref()
const getSearchSuggest = async (kw:string,ci:number)=>{
    let data = await searchSuggest(kw,ci)
    value.value = kw
    searchSuggestRes.value = data
    showHistory.value = false
    // console.log(data);
}
const searchHistory = ref([])
const setSearchHistory = (type:string,id:number)=>{
    
    if(searchHistory.value.length===0){
        searchHistory.value = [value.value]
        localStorage.setItem('search-history',JSON.stringify( searchHistory.value))
    }else{
        if(searchHistory.value.indexOf(value.value)!=-1){
            searchHistory.value.splice(searchHistory.value.indexOf(value.value),1)
        }
        searchHistory.value = [value.value,...searchHistory.value]
        localStorage.setItem('search-history',JSON.stringify(searchHistory.value))
    }

    if(type==='cinema'){
        router.push(`/cinema/${id}`)
    }
    if(type==='movie'){
        router.push(`/movie/${id}`)
    }
}
const deleteHistory =(index:number)=>{
    console.log(index);
}
const goMovieDetail = (mid) => {
    router.push({
        name:'movieDetail',
        params: {
            id: mid, 
        }
    })
}
onMounted(()=>{
    searchHistory.value = JSON.parse(localStorage.getItem('search-history'))||[]
    
})
</script>

<template>
    <header>
        <van-icon name="arrow-left" @click="router.go(-1)" />
        猫眼电影
    </header>
    <div class="search-box">
        <van-search class="search"
        v-model="value"
        show-action
        placeholder="搜电影、搜影院"
        @search="onSearch"
        @cancel="onCancel"
        @update:model-value="onUpdate"
    />
    </div>
    <div class="content">
        <div class="movies" v-if="searchSuggestRes?.movies">
            <div class="title">电影/电视剧/综艺</div>
            <div class="movie" v-for="el in searchSuggestRes?.movies.list" :key="el.id" @click="goMovieDetail(el.id)">
                <div class="left">
                    <img :src="el.img" alt="">
                    <div class="contain">
                        <p class="nm">{{ el.nm }}</p>
                        <p v-if="el.enm">{{ el.enm }}</p>
                        <p>{{ el.cat }}</p>
                        <p>{{ el.rt }}</p>
                    </div>
                </div>
                <div class="score">
                    <span>{{ el.sc }}分</span>
                </div>
            </div>
            <p class="more">查看全部{{ searchSuggestRes?.movies.total }}部影视剧</p>
        </div>
        <div class="diliver"></div>
        <div class="cinemas" v-if="searchSuggestRes?.cinemas">
            <div class="title">影院</div>
            <div class="cinema" v-for="el in searchSuggestRes?.cinemas.list" :key="el.id" @click="setSearchHistory('cinema',el.id)">
                <div class="first-line">
                    <div class="nm">{{ el.nm }}</div>
                    <div class="price"><span>{{ el.sellPrice }}</span>元起</div>
                </div>
                <div class="addr">
                    <van-text-ellipsis :content="el.addr" />
                </div>


            </div>
            <p class="more">查看全部{{ searchSuggestRes?.cinemas.total }}家影院</p>

        </div>
        <div class="history" v-if="!searchSuggestRes?.movies&&!searchSuggestRes?.cinemas">
            <ul class="history-list">
                <li v-for="(el,index) in searchHistory" :key="index">
                    <div class="left" @click="getSearchSuggest(el,cityId)">
                        <van-icon name="clock-o" />
                    {{ el }}
                    </div>
                    <van-icon name="cross" @click="deleteHistory(index)"/>
                </li>
            </ul>
        </div>
    </div>
    
</template>

<style lang="scss" scoped>
header{
    height: 50px;
    background-color: #e54847;
    color: #fff;
    position: relative;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .van-icon{
        position: absolute;
        left: 15px;
    }
}
.search-box{
    border-bottom: 1px solid #ddd;
    .search{
        .van-search__content{
            background-color: #fff;
            border-radius: 5px;
            border: 1px solid #ddd; 
        }
        .van-search__action{
            color: #e54847;
        }
    }
    
}
.content{
    .title{
        height: 40.5px;
        border-bottom: 1px solid #ddd;
        padding-left: 15px;
        line-height: 40.5px;
        color: #999;
        font-size: 15px;
    }
    .movie{
        margin-left: 15px;
        padding: 15px 0;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        .left{
            display: flex;
        }
        img{
            width: 64px;
            height: 90px;
        }
        .contain{
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            p{
                margin-top: 8px;
                font-size: 14px;
                color: #999;
            }
            .nm{
                color: #333;
                font-weight: bolder;
                font-size: 16px;
                margin-top: 5px;
            }
            
        }
        .score{
            margin-right: 15px;
            color: #fa0;
            font-size: 14px;
            span{
                font-size: 16px;
            }
        }
        
    }
    .more{
            color: #e54847;
            height: 44px;
            line-height: 44px;
            text-align: center;
        }
    .diliver{
        height: 10px;
        background-color: #f5f5f5;
    }
    .cinema{
        padding: 15px;
        .first-line{
            display: flex;
            .price{
                margin-left: 10px;
                font-size: 12px;
                color: #999;
                span{
                    color: #e54847;
                    font-size: 16px;
                }
            }
        }
        .addr{
            color: #999;
            font-size: 13px;
            margin: 8px 0;
        }
    }
    .history-list{
        li{
            padding: 15px;
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
            .left{
                flex: 1;
            }
            .van-icon{
                color: #999;
            }
        }
    }
}
</style>